import React from "react";
import { Modal, Button, type ModalProps } from "antd";
import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';

import "./index.less";

interface Props extends ModalProps {
    hideFooter?: any;
    onCancel?: any;
}
const Comp = (props: Props) => {
    const random = ~~(Math.random() * 100);
    const {
        onCancel, onOk, title,
    } = props;

    return (
        <Modal
            {...props}
            wrapClassName={`modal-comp wjj-${random}`}
            title={null}
            footer={null}
            closable={false}
        >
            <div className="el-dialog__header">
                <div data-v-1210a7bb="" className="flex dialog-top">
                    <div data-v-1210a7bb="" className="dialog-top__item active active-triangle"> {title || '弹窗'} </div>
                </div>
                <div aria-label="Close" className="el-dialog__headerbtn">
                    <CloseCircleOutlined onClick={onCancel} />
                </div>
            </div>

            <div className="el-dialog__body">
                {props.children}
            </div>

            {
                !props.hideFooter ? (
                    <div className="el-dialog__footer">
                        <Button onClick={onCancel} className="el-button el-tooltip el-button--primary el-button--small">
                            <span>{props.cancelText || '取消'}</span>
                        </Button>
                        <Button loading={props.confirmLoading} onClick={onOk} className="el-button el-tooltip el-button--warning el-button--small">
                            <span>{props.okText || '确认'}</span>
                        </Button>
                    </div>
                ) : ''
            }
        </Modal>
    );
};

export default Comp;